<!--
 * @Description: 中间表单布局面板
 * https://github.com/SortableJS/vue.draggable.next/issues/138
-->
<template>
  <div
    class="form-panel v-form-container"
    :class="{
      'form-app-container': client === CLIENT_TYPE_ENUM.APP,
    }"
  >
    <div class="header h-11" v-if="client === CLIENT_TYPE_ENUM.APP">
      <Icon icon="app-head|svg" class="!w-full !h-11" />
    </div>
    <ScrollContainer
      :style="{
        height: containerHeight,
      }"
      viewClass="h-full"
    >
      <Form
        v-bind="formConfig"
        class="h-full"
        :class="{
          'form-app-box': client === CLIENT_TYPE_ENUM.APP,
        }"
      >
        <div class="draggable-box">
          <draggable
            class="list-main flex flex-row flex-wrap"
            group="form-draggable"
            :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
            ghostClass="moving"
            :animation="180"
            handle=".drag-move"
            v-model="formConfig.schemas[client]"
            item-key="key"
            @add="addItem"
            @start="handleDragStart"
          >
            <template #item="{ element }">
              <LayoutItem
                v-if="!['Hide'].includes(element.component)"
                class="drag-move"
                :schema="element"
                :data="formConfig"
                :current-item="formConfig.currentItem || {}"
              />
            </template>
          </draggable>
          <Empty class="empty-text" v-show="isEmpty" description="从左侧选择控件添加" />
        </div>
      </Form>
    </ScrollContainer>
  </div>
</template>
<script lang="ts">
  import draggable from 'vuedraggable';
  import { defineComponent, computed, nextTick } from 'vue';
  // import { Row } from 'ant-design-vue';
  // Row,

  import LayoutItem from '../components/LayoutItem.vue';
  import { cloneDeep, sortBy } from 'lodash-es';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { CLIENT_TYPE_ENUM } from '../../../typings/form-type';
  import { Form } from 'ant-design-vue';
  import HEmpty from '/@/components/HEmpty/index.vue';
  import { Icon } from '/@/components/Icon';
  import { ComponentTypeEnum } from '/@/components/ModelTable/index';
  import { ScrollContainer } from '/@/components/Container';

  export default defineComponent({
    name: 'FormComponentPanel',
    components: {
      LayoutItem,
      draggable,
      Form,
      Empty: HEmpty,
      Icon,
      ScrollContainer,
    },

    emits: ['handleSetSelectItem'],
    setup(_, { emit }) {
      const { formConfig, client } = useFormDesignState();
      const typeField = 'componentType';
      /**
       * 拖拽完成事件
       * @param newIndex
       */
      const addItem = ({ newIndex }: any) => {
        //  将隐藏字段放到最后
        formConfig.value.schemas[client.value] = sortBy(
          formConfig.value.schemas[client.value] || [],
          (a) => a[typeField] === ComponentTypeEnum.Hide,
        );

        const schemas = formConfig.value.schemas[client.value];
        schemas[newIndex] = cloneDeep(schemas[newIndex]);
        nextTick(() => {
          emit('handleSetSelectItem', schemas[newIndex]);
        });
      };

      /**
       * 拖拽开始事件
       * @param e {Object} 事件对象
       */
      const handleDragStart = (e: any) => {
        emit('handleSetSelectItem', formConfig.value.schemas[client.value][e.oldIndex]);
      };

      // 获取祖先组件传递的currentItem

      // 计算布局元素，水平模式下为ACol，非水平模式下为div
      const layoutTag = computed(() => {
        return formConfig.value.layout === 'horizontal' ? 'Col' : 'div';
      });
      const isEmpty = computed(() => {
        const arr = formConfig.value.schemas[client.value].filter(
          (e) => e.componentType !== ComponentTypeEnum.Hide,
        );

        return arr.length === 0;
      });
      const containerHeight = computed(
        () => `calc(100% - ${client.value === CLIENT_TYPE_ENUM.APP ? 44 : 0}px)`,
      );
      return {
        addItem,
        handleDragStart,
        formConfig,
        layoutTag,
        CLIENT_TYPE_ENUM,
        isEmpty,
        client,
        containerHeight,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import url(../styles/variable.less);
  @import url(../styles/drag.less);

  .v-form-container {
    margin: 16px;
    background-color: @component-background;
    // 内联布局样式
    .ant-form-inline {
      .list-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;

        .layout-width {
          width: 100%;
        }
      }

      .ant-form-item-control-wrapper {
        min-width: 175px !important;
      }
    }
  }

  .form-panel {
    position: relative;
    height: calc(100% - 78px);
    // overflow-x: hidden;
    // overflow-y: auto;

    .empty-text {
      color: #aaa;
      height: 150px;
      top: -30%;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      position: absolute;
      z-index: 100;
    }

    .draggable-box {
      // width: 100%;
      .drag-move {
        cursor: move;
        min-height: 62px;
      }

      .list-main {
        overflow: auto;
        height: 100%;
        align-content: baseline;
        // 列表动画
        .list-enter-active {
          transition: all 0.5s;
        }

        .list-leave-active {
          transition: all 0.3s;
        }

        .list-enter,
        .list-leave-to {
          opacity: 0;
          transform: translateX(-100px);
        }

        .list-enter {
          height: 30px;
        }
      }
    }
  }

  .form-app-container {
    width: 375px;
    height: 789px;
    margin: 16px auto 0;
    overflow: hidden;
    padding: 0 12px;

    .form-app-box {
      margin-top: 16px;
      height: calc(100% - 60px);
      overflow-y: auto;
    }
  }
</style>
